<template>
  <div class="flex flex-col items-center justify-center">
    <!-- 拖拽上传区 -->
    <div
      class="w-80 h-40 border-2 border-dashed rounded-lg flex flex-col items-center justify-center text-gray-500 cursor-pointer hover:border-blue-400 transition"
      @drop.prevent="onDrop"
      @dragover.prevent
    >
      <div class="">拖拽图片到此区域上传</div>
    </div>
    <Separator class="w-100 m-8" />
    <!-- 手动上传区 -->
    <div class="">
      <input
        type="file"
        multiple
        accept="image/*"
        class="hidden"
        ref="fileInput"
        @change="onFileChange"
      />
      <Button variant="outline" type="button" @click="openFileDialog">
        选择图片上传
      </Button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { Button } from "@/components/ui/button";
import { Separator } from "@/components/ui/separator";
const emit = defineEmits<{ (e: "upload", files: File[]): void }>();
const fileInput = ref<HTMLInputElement | null>(null);

function openFileDialog() {
  fileInput.value?.click();
}

function onFileChange(e: Event) {
  const files = (e.target as HTMLInputElement).files;
  if (files && files.length) {
    emit("upload", Array.from(files));
    if (fileInput.value) fileInput.value.value = "";
  }
}

function onDrop(e: DragEvent) {
  const files = e.dataTransfer?.files;
  if (files && files.length) {
    emit("upload", Array.from(files));
  }
}
</script>
